<template>
    <div class="address_edit">

        <van-address-edit
            :area-list="areaList"
            :address-info="addressInfo"
            show-postal
            show-delete
            show-set-default
            :area-columns-placeholder="['请选择', '请选择', '请选择']"
            @save="onSave"
            @delete="onDelete"
        >
            <div solt="default" class="tips">
                提醒：每次下单时会使用该地址，实际下单地址会根据您购物切换的地区进行智能判断，请在下单时确认。
            </div>
        </van-address-edit>
    </div>
</template>

<script>
import { AddressEdit, Dialog } from "vant";
import { areaList } from "@vant/area-data";

import {
    getAddressDetailById,
    saveAddress,
    deleteAddressById,
} from "@/api/address.js";


export default {
    components: {
        [AddressEdit.name]: AddressEdit,
    },

    data() {
        return {
            areaList, //地区列表
            addressInfo: {
                //收货人信息初始值
                id: "", //每条地址的唯一标识
                name: "", //姓名
                tel: "", //电话
                province: "", //省份
                city: "", //城市
                county: "", //区县
                areaCode: "", //地区编码，通过省市区选择获取（必填）
                postalCode: "", //邮政编码
                addressDetail: "", //详细地址
                isDefault: false, //是否选择默认
            },
        };
    },
    props: ["id"],
    created() {
        this.getAddressDetailById();
    },
    methods: {
        //根据id获取地址数据
        async getAddressDetailById() {
            if (!this.id) {
                console.log(this.id); //id==0 则是新增 否则是编辑
                return;
            }

            try {
                //获取登录用户的收货地址
                let result = await getAddressDetailById({ id: this.id });
                if (result.code === 1) {
                    this.addressInfo.id = result.data.id;
                    this.addressInfo.name = result.data.name;
                    this.addressInfo.tel = result.data.tel;
                    this.addressInfo.province = result.data.province;
                    this.addressInfo.city = result.data.city;
                    this.addressInfo.county = result.data.county;
                    this.addressInfo.areaCode = result.data.area_code;
                    this.addressInfo.postalCode = result.data.postal_code;
                    this.addressInfo.addressDetail = result.data.address_detail;
                    this.addressInfo.isDefault = result.data.is_default == 1 ? true : false;
                } else if (result.code === 2) {
                    this.$router.push({ name: "login" });
                } else {
                    throw result.msg;
                }
            } catch (error) {
                Dialog.alert({ title: "错误", message: error });
            }
        }, //====================================================
        //保存地址
        async onSave(content) {
            let params = {};
            params.id = content.id;
            params.name = content.name;
            params.tel = content.tel;
            params.province = content.province;
            params.city = content.city;
            params.county = content.county;
            params.area_code = content.areaCode;
            params.postal_code = content.postalCode;
            params.address_detail = content.addressDetail;
            params.is_default = content.isDefault == true ? 1 : 0;

            console.log(params);

            try {
                let result = await saveAddress(params); //
                if (result.code === 1) {
                    this.$toast(result.msg); //地址修改成功
                    setTimeout(() => {
                        this.$router.go(-1);
                    }, 2000);
                } else if (result.code === 2) {
                    this.$router.push({ name: "login" });
                } else {
                    throw result.msg;
                }
            } catch (error) {
                Dialog.alert({ title: "错误", message: error });
            }
        },//====================================================
        async onDelete(content) {
            if (!content.id) {
                return;
            }
            try {
                let params = { id: content.id };
                let result = await deleteAddressById(params); //获取登录用户的收货地址
                if (result.code === 1) {
                    this.$toast(result.msg); //删除成功
                    this.$router.go(-1); //页面跳转
                } else if (result.code === 2) {
                    //需要登录
                    this.$router.push({ name: "login" });
                } else {
                    //其他
                    throw result.msg;
                }
            } catch (error) {
                await Dialog.alert({title: "错误", message: error});
                this.$router.go(-1); //页面跳转
            }
        },//====================================================
    },
};
</script>

<style scoped lang="less">
@bgColor: #e0e4e9;
@mainColor: #919296;
.address_edit {
    /deep/.van-address-edit {
        border-top: 5px solid @bgColor;
        position: relative;
        .van-address-edit__buttons {
            margin-top: 70px;
            .van-button--danger {
                background: @mainColor;
                border-color: @mainColor;
            }
        }
        .tips {
            padding: 12px 12px;
            font-size: 12px;
            color: @mainColor;
        }
    }
}
</style>
